import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from 'recharts';
import { getNiceTickValues } from 'recharts-scale';

import './index.less';

const CustomizedTick = () => {
  return null;
};

interface CardiogramChartProps {
  type: 'percent' | 'default';
  max?: number;
  ticksCount?: number;
  data?: any[];
  color?: string;
  unit?: string;
}

const CardiogramChart: React.FC<CardiogramChartProps> = ({
  type = 'default',
  max = 100,
  ticksCount = 10,
  data = [],
  color,
  unit,
}) => {
  let topLeft = '';
  let topRight = '';
  let bottomLeft = '60秒';
  let bottomRight = '0';
  let yTicks = [];
  const yAxisProps: any = {};

  // console.log(data);
  
  if (type === 'percent') {
    for (let i = 0; i <= ticksCount; i++) {
      yTicks.push(i * (max / ticksCount));
    }

    topLeft = '%利用率';
    topRight = '100%';
    yAxisProps.domain = [0, max];
    yAxisProps.ticks = yTicks;
  } else if (type === 'default') {
    topLeft = `单位：${unit}`;
    const yArr = data.map(item => {
      return item.y;
    });

    const maxValue = max || (Math.max.apply(null, yArr) || 0);
    const tickValues = getNiceTickValues([0, maxValue], 11);
    yAxisProps.domain = [0, maxValue];
    yAxisProps.ticks = tickValues;
    topRight = String(Math.floor(tickValues[tickValues.length - 1]));
  }

  return (
    <div className='rechart-main'>
      <div className='top'>
        <div className='left'>{topLeft}</div>
        <div className='right'>{topRight}</div>
      </div>
      <div className='chart'>
        <AreaChart
          width={310}
          height={150}
          data={data}
          margin={{
            top: 10,
            right: 0,
            left: 0,
            bottom: 0,
          }}
        >
          {/* tick={<CustomizedTick />} */}
          {/* domain={[0, 1]} */}
          <CartesianGrid stroke={color} />
          <XAxis
            dataKey="x"
            tick={<CustomizedTick />}
            tickLine={false}
            domain={[0, 60]}
            ticks={[0, 10, 20, 30, 40, 50, 60]}
            interval={0}
            reversed
            stroke="rgba(0,0,0,0)"
          />
          <YAxis
            tick={<CustomizedTick />}
            tickLine={false}
            interval={0}
            stroke="rgba(0,0,0,0)"
            {...yAxisProps}
          />
          {/* <Tooltip /> */}
          <Area
            dataKey="y"
            stroke={color}
            fill={color}
            fillOpacity={0.3}
            isAnimationActive={false}
          />
        </AreaChart>
      </div>

      <div className='bottom'>
        <div className='left'>{bottomLeft}</div>
        <div className='right'>{bottomRight}</div>
      </div>
    </div>
  );
};

export default CardiogramChart;
